<template>
	<el-form ref="baseform" :model="formJa" label-position="right" label-width="120px" :rules="rules">
		<el-form-item prop="resourceRange" label="所属大类">
			<el-radio-group :disabled="['2', '3'].includes(data.type)" v-model="formJa.resourceRange">
				<el-radio-button label="1">客户资料</el-radio-button>
				<el-radio-button label="2">分包资料</el-radio-button>
			</el-radio-group></el-form-item
		>
		<el-form-item prop="resourceType" label="所属分类">
			<el-select :disabled="['2', '3'].includes(data.type)" v-model="formJa.resourceType" style="width: 100%" placeholder="请选择所属分类">
				<el-option v-for="item in optionsV" :key="item.value" :label="item.label" :value="item.value" />
			</el-select>
		</el-form-item>
		<el-form-item prop="resourceName" label="标题">
			<el-input :disabled="['2', '3'].includes(data.type)" v-model="formJa.resourceName" placeholder="请输入标题" />
		</el-form-item>
		<el-form-item label="附件上传">
			<el-upload
				v-model:file-list="filelist"
				:action="fileUrl"
				:disabled="['2', '3'].includes(data.type)"
				multiple
				ref="upload"
				:headers="token"
				name="files"
				:on-success="handleSuccess"
				:on-remove="handleRemove"
				style="width: 340px">
				<el-button type="primary">上传</el-button>
			</el-upload>
		</el-form-item>
		<el-form-item v-if="data.way != '0'" label="附件下载">
			<div class="info-url" v-for="(item, index) in dowloadList" :key="index" @click="downloadfile(item)">
				<el-icon style="position: relative; top: 3px"><Link /></el-icon>&nbsp;{{ item }}
			</div>
		</el-form-item>
		<el-form-item label="图片上传">
			<el-upload
				class="avatar-uploader"
				:disabled="['2', '3'].includes(data.type)"
				:action="imgUrl"
				ref="upload"
				multiple
				accept=".jpg,.jpeg,.png"
				list-type="picture-card"
				v-model:file-list="imglist"
				:headers="token"
				name="files"
				:on-success="handleSuccessImg"
				:on-remove="handleRemoveImg"
				:on-preview="handlePictureCardPreview">
				<el-icon class="avatar-uploader-icon"><Plus /></el-icon>
			</el-upload>
		</el-form-item>
		<el-form-item prop="projectResource" label="简介概述">
			<el-input :disabled="['2', '3'].includes(data.type)" :rows="5" type="textarea" v-model="formJa.projectResource" placeholder="请输入简介" />
		</el-form-item>
		<el-form-item v-if="['2', '3'].includes(data.type)" prop="resourceStatus" label="审核">
			<el-radio-group v-model="formJa.resourceStatus" :disabled="data.type == '2'">
				<el-radio label="2">审核通过</el-radio>
				<el-radio label="3">审核不通过</el-radio>
			</el-radio-group>
		</el-form-item>
		<el-form-item v-if="['2', '3'].includes(data.type)" prop="auditNote" label="审核备注">
			<el-input :disabled="data.type == '2'" :rows="5" type="textarea" v-model="formJa.auditNote" placeholder="请输入简介" />
		</el-form-item>
	</el-form>
	<el-dialog v-model="dialogVisible" width="500">
		<img style="max-width: 460px" :src="dialogImageUrl" alt="Preview Image" />
	</el-dialog>
	<div style="text-align: right; margin-bottom: 20px">
		<el-button v-if="!data.status" type="primary" @click="submitJa">保 存</el-button>
	</div>
</template>
<script setup>
import { addRes, updateRes, getResource } from '@/api/project/project'
import { computed, onMounted, toRefs, watch } from 'vue'
import { download } from '@/utils/request'
const { proxy } = getCurrentInstance()
const { resource_type } = proxy.useDict('resource_type')
import { getConfigKey } from '@/api/system/config'
import { getToken } from '@/utils/auth'
const fileUrl = ref('')
const imgUrl = ref('')
const pre = ref('')
const prop = defineProps({
	data: Object
})
const { data } = toRefs(prop)
getConfigKey('file_upload').then((response) => {
	fileUrl.value = response.msg
})
getConfigKey('img_upload').then((response) => {
	imgUrl.value = response.msg
})
getConfigKey('sys.upload').then((response) => {
	pre.value = response.msg
	if (data.value.resourceId) {
		getResource(data.value.resourceId).then((res) => {
			for (let item in formJa) {
				formJa[item] = res.data[item]
			}
			formJa['resourceType'] = formJa['resourceType'] + ''
			formJa['resourceStatus'] = formJa['resourceStatus'] + ''
			if (res.data.projectImageList) {
				for (let item of res.data.projectImageList.fileAdressList) {
					imglist.value.push({ name: item, url: pre.value + item })
				}
			}
			if (res.data.projectFileList) {
				for (let item of res.data.projectFileList.fileAdressList) {
					filelist.value.push({ name: item, url: item })
				}
				dowloadList.value = res.data.projectFileList.fileAdressList
			}
			if (formJa['resourceStatus'] == '1') {
				formJa['resourceStatus'] = ''
			}
			if (data.value.type == '1') {
				formJa['resourceStatus'] = '1'
			}
		})
	}
})

const token = { Authorization: 'Bearer ' + getToken() }

const emit = defineEmits(['closeRes'])
const optionsV = computed(() => {
	if (resource_type.value) {
		return resource_type.value.filter((item) => {
			return !(
				(['1', '4', '5'].includes(data.value.resourceCategory) && !['0', '1', '2', '3'].includes(item.value)) ||
				(data.value.resourceCategory == '3' && !['0'].includes(item.value)) ||
				(data.value.resourceCategory == '2' && ['0', '1', '2', '3'].includes(item.value))
			)
		})
	} else {
		return resource_type.value
	}
})

const formJa = reactive({
	resourceId: undefined,
	projectId: data.value.projectId,
	resourceName: undefined,
	resourceCategory: data.value.resourceCategory,
	resourceRange: undefined,
	resourceType: undefined,
	resourceStatus: undefined,
	projectResource: undefined,
	auditNote: undefined,
	projectFileList: { fileCategory: 2, fileAdressList: [] },
	projectImageList: { fileCategory: 1, fileAdressList: [] }
})
const rules = {
	resourceRange: [{ required: true, message: '所属大类不能为空', trigger: 'blur' }],
	resourceType: [{ required: true, message: '所属分类不能为空', trigger: 'blur' }],
	resourceName: [{ required: true, message: '标题不能为空', trigger: 'blur' }],
	resourceStatus: [{ required: true, message: '审核状态不能为空', trigger: 'blur' }],
	projectResource: [{ required: true, message: '备注不能为空', trigger: 'blur' }]
}
const dowloadList = ref([])
onMounted(() => {})
const imglist = ref([])
const filelist = ref([])

const handleSuccessImg = () => {
	formJa.projectImageList.fileAdressList = imglist.value.map((e) => {
		if (e) {
			return e.response ? e.response.data[0] : e.url.replace(pre.value, '')
		}
	})
}
const handleRemoveImg = () => {
	formJa.projectImageList.fileAdressList = imglist.value.map((e) => {
		if (e) {
			return e.response ? e.response.data[0] : e.url.replace(pre.value, '')
		}
	})
}

const dialogImageUrl = ref('')
const dialogVisible = ref(false)
const handleSuccess = () => {
	formJa.projectFileList.fileAdressList = filelist.value.map((e) => {
		if (e) {
			return e.response ? e.response.data[0] : e.url
		}
	})
}
const handleRemove = () => {
	formJa.projectFileList.fileAdressList = filelist.value.map((e) => {
		if (e) {
			return e.response ? e.response.data[0] : e.url
		}
	})
}
const handlePictureCardPreview = (uploadFile) => {
	dialogImageUrl.value = uploadFile.url
	dialogVisible.value = true
}
const downloadfile = (url) => {
	download({ url: url }).then()
}
const baseform = ref()
const submitJa = () => {
	baseform.value.validate((valid, e) => {
		if (valid) {
			if (formJa.resourceId) {
				updateRes(formJa).then((res) => {
					proxy.$modal.msgSuccess('修改成功！')
					emit('closeRes')
				})
			} else {
				addRes(formJa).then((res) => {
					proxy.$modal.msgSuccess('新增成功！')
					emit('closeRes')
				})
			}
		}
	})
}
</script>
<style scoped>
.info-url {
	display: block;
	width: 100%;
	height: 30px;
	line-height: 30px;
	font-size: 14px;
	background-color: #3f9efe;
	color: #ffffff;
	margin: 5px 0;
	padding-left: 10px;
	cursor: pointer;
}
</style>
